<template>
  <div style="width: 102%">
    <el-table :data="filteredOrderList" style="width: 102%" row-key="id">
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="orderTime" label="下单时间"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="tableNum" label="桌号"></el-table-column>
      <el-table-column prop="goodsName" label="下单餐品"></el-table-column>
      <el-table-column prop="orderNum" label="订单号"></el-table-column>
      <el-table-column label="评价状态">
        <template slot-scope="scope">
          <!-- 显示评价状态，与 ifeva 绑定 -->
          <span>{{ scope.row.ifeva ? '已评价' : '未评价' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="deleteOrder(scope.row)">删除</el-button>
          <el-button type="text" v-if="!scope.row.ifeva" @click="showRating(scope.row)">去评价</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="评价" :visible.sync="dialogVisible" width="30%">
      <el-form :model="ratingForm">
        <el-form-item label="评分">
          <el-rate v-model="ratingForm.mealLevel" :max="5"></el-rate>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="ratingForm.describe"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRating">提交评价</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      evaorderid: 0,
      evaflag: false,
      userInfo: {},
      orderList: [],
      dialogVisible: false,
      ratingForm: {
        mealLevel: 0,
        describe: '',
        userId: 0,
        userName: "",
        evaTime: new Date().toISOString(), // 使用当前时间
        mealId: null, // 需要从当前行数据获取
        mealName: '', // 需要从当前行数据获取
      },
    };
  },

  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('user'));
    this.showOrderTable();
  },

  computed: {
    filteredOrderList() {
      return this.orderList.filter((order) => order.flag);
    },
  },

  methods: {
    showOrderTable: async function () {
      let userName = this.userInfo.userName;
      const response = await this.$http.get("/order/byuser/" + userName);
      if (response.status === 200) {
        this.orderList = response.data;
      } else {
        console.error("获取全部订单错误", response.message);
      }
    },
    deleteOrder(row) {
      this.$confirm("此操作将删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .put(`/order/clientdel/${row.id}`)
            .then((response) => {
              if (response.status === 200) {
                this.showOrderTable();
                this.$message.success("删除成功");
              } else {
                this.$message.error(response.message || "删除失败");
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    showRating(row) {
      console.log(row);
      this.evaorderid = row.id;
      this.ratingForm.mealId = row.id;
      this.ratingForm.mealName = row.goodsName;
      this.dialogVisible = true;
    },
    submitRating() {
      const url = '/eva/addEva'; // 确保这个URL与后端控制器的映射一致
      let formData = {
        mealLevel: this.ratingForm.mealLevel,
        describe: this.ratingForm.describe,
        userId: this.userInfo.id, // 确保这里获取的是正确的用户ID
        userName: this.userInfo.userName, // 确保这里获取的是正确的用户名
        evaTime: this.ratingForm.evaTime,
        mealId: this.ratingForm.mealId,
        mealName: this.ratingForm.mealName,
      };

      this.$http.post(url, formData)
        .then(response => {
          if (response.status === 200) {
            this.$message.success('评价成功');
            this.dialogVisible = false;

            // 更新前端显示的评分
            const orderIndex = this.orderList.findIndex(order => order.id === this.ratingForm.mealId);
            if (orderIndex !== -1) {
              this.$set(this.orderList[orderIndex], 'mealLevel', this.ratingForm.mealLevel);
              this.$set(this.orderList[orderIndex], 'ifeva', 1); // 标记为已评价
            }

            // 调用更新订单状态的API
            return this.$http.put("/order/Clientupdate/orderid/" + this.evaorderid);
          }
        })
        .then(() => {
          // 可能需要重新加载订单列表或执行其他操作
          this.showOrderTable();
        })
        .catch(error => {
          console.error('请求失败:', error);
          this.$message.error('评价请求失败');
        });
    },
  },
}
</script>

<style scoped>

.el-menu-item {
  width: 200px;
}
</style>